<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">航标自动报警</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem">
      <div style="width: 100%;height: 100%;" ref="ech"></div>
    </div>
  </div>
</template>
<script>
// import barLine from "@/components/echartsMod/barLine.vue";
import * as echarts from "echarts";
export default {
  // components: {
  //   barLine
  // },
  //变量
  data() { return { Echarts: null, } },
  //初始
  mounted() {
    let echartsL = echarts;
    this.$nextTick(() => {
      let echarts = echartsL.init(this.$refs.ech, "macarons");
      this.Echarts = echarts;
      this.getEach()
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getEach() {
      let xLabel = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
      ];

      let data = [
        {
          label: "灯质异常",
          arr: ["110", "207", "342", "225", "330", "110", "220", "442", "225", "330"],
        },
        {
          label: "欠压", // 新增曲线
          arr: ["5", "10", "15", "12", "18", "6", "11", "20", "13", "19"],
        },
        {
          label: "过压", // 新增曲线
          arr: ["5", "10", "15", "12", "18", "6", "11", "20", "13", "19"],
        },
        {
          label: "终端故障", // 新增曲线
          arr: ["5", "10", "15", " ", "18", "6", "11", "20", "13", "19"],
        }, {
          label: "通讯故障", // 新增曲线
          arr: ["5", "10", "15", "12", "18", "6", "11", "20", "13", "19"],
        }
      ];
      const seriesData = [];

      data.forEach((item, index) => {
        item.arr = item.arr.map((v) => Number(v));
        seriesData.push({
          name: item.label,
          type: "line",
          showAllSymbol: true,
          symbolSize: 8,
          smooth: true,
          // color: color[index],
          yAxisIndex: index === 1 ? 1 : 0, // 第二条曲线使用右侧 Y 轴
          tooltip: {
            show: true,
          },
          data: item.arr,
        });
      });

      var option = {
        grid: {
          // top:"1%",
          left: "2%",
          right: "2%",
          bottom: "1%",
          containLabel: true,
        },
        legend: {
          top: "1%",
          textStyle: { color: "#ffffff", fontSize: 28 }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: { show: true, interval: 0, fontSize: 32 },
            splitLine: { show: true, lineStyle: { color: "rgba(77, 128, 254, 0.2)" } },
            axisLine: { show: true, lineStyle: { color: "fff" } },
            axisTick: { show: false },
            data: xLabel,
          },
        ],
        yAxis: [
          { // 左侧 Y 轴
            axisLine: { show: true, lineStyle: { color: "rgba(77, 128, 254, 0.2)", width: 1 } },
            axisLabel: { color: "#fff", formatter: '{value}', fontSize: 32 },
            splitLine: { show: true, lineStyle: { color: "rgba(77, 128, 254, 0.2)" } },
          },
          { // 右侧 Y 轴
            axisLine: { show: true, lineStyle: { color: "#fff", width: 1 } },
            axisLabel: { color: "#fff", formatter: '{value}t', fontSize: 32 }, // 可以加单位
            splitLine: { show: false },
          }
        ],
        series: seriesData,
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped></style>